:root {
  /* Brand */
  --apz-navy: #071a35;          /* Midnight Navy: header, dark surfaces */
  --apz-navy-2: #0e2747;        /* subnav, Continue card, dark buttons */
  --apz-navy-3: #173458;        /* active tab bg on navy */
  --apz-navy-4: #3a5273;        /* toggle-off track, muted on navy */
  --apz-deep-navy: #0f2a52;     /* logo colorway */
  --apz-teal: #22c7c7;          /* primary accent */
  --apz-teal-text: #0c6f6f;     /* teal for text on light bg (5.4:1 on tint) */
  --apz-teal-tint: #e6f8f8;     /* chips, tile pastel */
  --apz-copper: #c96a2a;        /* copper as fill / large text only */
  --apz-copper-text: #a8531c;   /* copper for small text (5.4:1 on white) */
  --apz-copper-border: #d9a27d;
  --apz-copper-tint: #fbeadf;
  --apz-gold: #d4af37;          /* favorite star fill */
  --apz-gold-stroke: #b8860b;   /* star outline (3.3:1) */
  --apz-violet: #5b52c9;
  --apz-violet-tint: #ebe8fa;
  --apz-green: #237a58;
  --apz-green-tint: #e3f4ec;
  --apz-butter-tint: #fdf3d6;
  --apz-slate-tint: #e8eef6;
  --apz-chip-bg: #4a6a9c;        /* filter chips: Midnight Navy lightened */
  --apz-chip-text: #ffffff;

  /* Neutrals */
  --apz-canvas: #f4f6f8;
  --apz-surface: #ffffff;
  --apz-ink: #0f1f38;
  --apz-body: #4b5d78;
  --apz-muted: #5f7291;         /* 4.9:1 on white, 4.5:1 on canvas */
  --apz-muted-decor: #7d8ea8;   /* non-text only: dividers, placeholder glyphs */
  --apz-inactive: #8d9db3;      /* unchecked borders, off states */
  --apz-track: #cfd6e0;
  --apz-handle: #d3dae3;
  --apz-nav-text: #9db2ce;
  --apz-light: #f5f7fa;

  /* Borders */
  --apz-border-hairline: rgba(7,26,53,.08);
  --apz-border: rgba(7,26,53,.10);
  --apz-border-strong: rgba(7,26,53,.14);
  --apz-border-input: #8d9db3;  /* input boundary, 2.8:1 + inner white */
  --apz-border-hover: rgba(7,26,53,.20);
  --apz-border-on-navy: rgba(245,247,250,.18);
  --apz-track-on-navy: rgba(245,247,250,.15);

  /* Semantic */
  --bg-canvas: var(--apz-canvas);
  --bg-surface: var(--apz-surface);
  --bg-header: var(--apz-navy);
  --bg-subnav: var(--apz-navy-2);
  --bg-dark-card: var(--apz-navy-2);
  --text-primary: var(--apz-ink);
  --text-body: var(--apz-body);
  --text-muted: var(--apz-muted);
  --text-on-dark: var(--apz-light);
  --text-nav: var(--apz-nav-text);
  --text-link: var(--apz-teal-text);
  --accent: var(--apz-teal);
  --accent-text: var(--apz-teal-text);
  --accent-tint: var(--apz-teal-tint);
  --on-accent: var(--apz-navy);
  --attribute: var(--apz-copper-text);
  --attribute-border: var(--apz-copper-border);
  --favorite: var(--apz-gold);
  --favorite-off: var(--apz-inactive);
  --progress-track: var(--apz-track);
  --progress-fill: #1aa9a9;      /* teal darkened for 3:1 vs track */
  --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px var(--apz-navy-2);
  --focus-ring-on-dark: 0 0 0 2px var(--apz-navy), 0 0 0 4px var(--apz-teal);
  --status-good: #15803d;
  --status-warn: #b45309;
  --status-bad: #dc2626;

  /* Levels */
  --level-beginner: var(--apz-green);
  --level-beginner-bg: var(--apz-green-tint);
  --level-intermediate: var(--apz-copper-text);
  --level-intermediate-bg: var(--apz-copper-tint);
  --level-advanced: var(--apz-violet);
  --level-advanced-bg: var(--apz-violet-tint);

  /* Tile pastels (goal tiles, in order) */
  --tile-1: var(--apz-teal-tint);
  --tile-2: var(--apz-copper-tint);
  --tile-3: var(--apz-violet-tint);
  --tile-4: var(--apz-green-tint);
  --tile-5: var(--apz-butter-tint);
  --tile-6: var(--apz-slate-tint);
}